<template>
  <div class="game-panel">
    <van-nav-bar :title="name" left-arrow @click-left="onBackHomePage" />
    <div class="play-wrapper">
      <iframe
        :src="iframeSrc"
        frameborder="0"
        width="100%"
        height="100%"
      ></iframe>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue';
const props = defineProps({
  path: {
    type: String,
    required: true,
  },
  name: {
    type: String,
    default: '',
  },
});

const emit = defineEmits(['close']);
const onBackHomePage = () => {
  emit('close', true);
};

const iframeSrc = computed(() => {
  const url = new URL(
    `../assets/games/${props.path}/index.html`,
    import.meta.url
  );
  console.log('url', url);
  return url.href;
});
</script>

<style lang="less" scoped>
.game-panel {
  width: 100vw;
  height: 100vh;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  // background-color: #fff;
  .play-wrapper {
    height: calc(100% - 46px);
  }
}
</style>
